<template>
	<view class="root">
		<navigator
			v-for="(msg, index) in messages"
			:key="index"
			class="ml-30 mr-30 mt-50"
			:url="msg.url"
		>
			<text class="fs-24 color-999 text-center">{{ msg.time }}</text>

			<view
				:style="{
					boxShadow: '0 0 8rpx 0 rgba(0, 0, 0, 0.1)',
					padding: '36rpx 30rpx',
				}"
				class="mt-30 br-24"
			>
				<label class="jc-sb">
					<text class="fs-34 color-1b1b1b">{{ msg.title }}</text>
					<uni-icons type="arrowright" color="#999" />
				</label>
				<text class="fs-24 color-999 ellipsis mt-20">
					{{ msg.content }}
				</text>
			</view>
		</navigator>

		<text
			v-if="!messages.length"
			:style="{ top: '50vh', transform: 'translateY(-50%)' }"
			class="absolute fs-32 color-7c838d pl-30 pr-30 as-center"
		>
			暂无通知信息
		</text>
	</view>
</template>

<script lang="ts">
	import Vue from "vue";
	import Component from "vue-class-component";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";

	@Component({ components: { uniIcons } })
	export default class order extends Vue {
		// component property

		messages: AnyObject[] = [];

		onLoad() {
			this.getData();
			uni.$on("receiveNotice", this.getData);
		}

		getData(payload: string = "") {
			this.request
				.get("/employee/noticeList", { type: 3 })
				.then(({ data }) => (this.messages = data));
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>